<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: DataType.Number.parse()</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: DataType.Number.parse()</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */
#demo label {display:block;}
#demo fieldset {margin:1em;}
</style>

<div class="intro">
    <p>The Number module of the DataType Utility allows you to take a data value and convert it to a number.</p>
</div>

<div class="example yui3-skin-sam">
    <form id="demo">
    <fieldset>
        <label for="demo_input">Value to parse: <input type="text" id="demo_input"></label>
    </fieldset>
    <fieldset>
        <input type="submit" id="demo_btn" value="Alert parsed number">
    </fieldset>
</form>

<script>
YUI().use("node", "datatype-number", function (Y) {
    Y.on("submit", function(e){
        e.halt();
        
        var input = Y.one("#demo_input").get("value"),
            output = Y.DataType.Number.parse(input);
                
        if(output === "") {
            output += "(Invalid value)"
        }
        alert(output);
    }, "#demo");
});
</script>

</div>

<p>To convert a data value to a number, simply call the <code>parse()</code> function of the DataType.Number class:</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-number&quot;, function(Y) {
    var output = Y.DataType.Number.parse(&quot;123123.123&quot;);
    &#x2F;&#x2F; output is the number 123123.123
});</pre>


<p>Under the hood, the data value is converted to a number via <code>+data</code>, not <code>parseInt()</code>. When the resulting value is <code>NaN</code>, then null is returned:</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-number&quot;, function(Y) {
    var output = Y.DataType.Number.parse(&quot;$100&quot;);
    &#x2F;&#x2F; output is null

    output = Y.DataType.Number.parse(&quot;20 dollars&quot;);
    &#x2F;&#x2F; output is null

    output = Y.DataType.Number.parse(&quot;3,000,000.12&quot;);
    &#x2F;&#x2F; output is null (it&#x27;s the commas)

    output = Y.DataType.Number.parse(new Date(&quot;Jan 1, 2000&quot;));
    &#x2F;&#x2F; output is 946713600000

});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Formatting dates into strings.">
                                        <a href="datatype-dateformat.html">DataType.Date.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting dates into strings using pre-packaged language resource bundles.">
                                        <a href="datatype-dateformat-lang.html">Formatting Dates Using Language Resource Bundles</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into dates.">
                                        <a href="datatype-dateparse.html">DataType.Date.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting numbers into strings.">
                                        <a href="datatype-numberformat.html">DataType.Number.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into numbers.">
                                        <a href="datatype-numberparse.html">DataType.Number.parse()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Formatting XML documents into strings.">
                                        <a href="datatype-xmlformat.html">DataType.XML.format()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing strings into XML documents.">
                                        <a href="datatype-xmlparse.html">DataType.XML.parse()</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
